import { useState } from "react";
import { createStore } from "redux"
 
// 定义Store 初始值
const initialState = { value: 0 };

// Reducer，处理Action返回新的 state
function counterReducer(state = initialState, action) {
  switch (action.type) {
    case "counter/incremented":
      return { value: state.value + 1 };
    case "counter/decremented":
      return { value: state.value - 1 };
    default:
      return state
  }
}

// 利用Redux API 创建一个Store，参数就是Reducer
const store = createStore(counterReducer);

const output = []

// Store 提供了 subscribe 用于监听数据变化
store.subscribe(()=> console.log(store.getState()))
store.subscribe(()=> output.push(store.getState()))

// 计数器加1 用Store 的dispatch 方法分发一个 Action， 用于Reducer 处理
const incrementAction = {type:"counter/incremented"}
// store.dispatch(incrementAction);     监听函数输出： {value：1}

// 计数器减一
const decrementAction = {type:"counter/decremented"}
// store.dispatch(decrementAction);     监听函数输出： {value：0}
export default function PureRedux ()  {
  const [ , setValue] = useState(true);
  // 触发重新渲染
  const forceUpdate = () => {
    return setValue((v)=>{
      console.log(v)
      return !v
    })
  };
  console.log(output)
  return (
    <div>
      <button onClick={()=> store.dispatch(incrementAction) && forceUpdate()} >+</button>
      <button onClick={() => store.dispatch(decrementAction) && forceUpdate()}>-</button>
      <br />
      <textarea style={{height:"500px"}} value={output.map((o)=>JSON.stringify(o)).join('\n')} readOnly></textarea>
    </div>
  )
}